<template>
  <!-- 退货原因详情 returnApplyDetail -->
  <div class="detail-container">
    <el-card class="box-card1 detail-card" shadow="never">
      <span class="detail-title">退货商品</span>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        table-layout="auto"
        class-name="detail-table"
      >
        <el-table-column label="商品图片" align="center">
          <template #default="scope"
            ><img :src="scope.row.productPic" alt="" height="80"
          /></template>
        </el-table-column>
        <el-table-column label="商品名称" align="center" width="320">
          <template #default="scope">
            <span>{{ scope.row.productName }}</span>
            <br />
            <span>品牌：{{ scope.row.productBrand }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格/货号" align="center">
          <template #default="scope">
            <span>价格：￥{{ scope.row.productRealPrice.toFixed(2) }}</span>
            <br />
            <span>货号：NO.{{ scope.row.productId }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="productAttr" label="属性" align="center" />
        <el-table-column prop="productCount" label="数量" align="center" />
        <el-table-column prop="productCount" label="小计" align="center">
          <template #default="scope">
            <span
              >￥{{
                (scope.row.productRealPrice * scope.row.productCount).toFixed(2)
              }}</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="detail-total">
        <span>合计：</span
        ><span style="color: #f56c6c">￥{{ totalPrices }}</span>
      </div>
    </el-card>
    <el-card class="box-card2 detail-card" shadow="never">
      <span class="detail-title">服务单信息</span>
      <div class="form-container-border">
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >服务单号</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            state.detailList.id
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >申请状态</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            statusFn
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >订单编号</el-col
          >
          <el-col :span="18" class="form-border font-small"
            >{{ state.detailList.orderSn
            }}<el-button
              type="primary"
              link
              size="small"
              @click="toOrderDetailFn"
              >查看</el-button
            ></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >申请时间</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            newDate(state.detailList.createTime)
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >用户账号</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            state.detailList.memberUsername
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >联系人</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            state.detailList.returnName
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >联系电话</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            state.detailList.returnPhone
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >退货原因</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            state.detailList.reason
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >问题描述</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            state.detailList.description
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >凭证图片</el-col
          >
          <el-col :span="18" class="form-border font-small"
            ><img src="" alt="" width="80" height="80"
          /></el-col>
        </el-row>
      </div>
      <div class="form-container-border">
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >订单金额</el-col
          >
          <el-col :span="18" class="form-border font-small"
            >￥{{ Number(state.detailList.productRealPrice).toFixed(2) }}</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >确认退款金额</el-col
          >
          <el-col :span="18" class="form-border font-small"
            >￥
            <el-input
              v-model="state.detailList.returnAmount"
              disabled
              placeholder="Please input"
              style="display: inline; width: auto"
          /></el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >选择收货点</el-col
          >
          <el-col :span="18" class="form-border font-small">
            <el-select
              v-model="state.detailList.companyAddressId"
              class="m-2"
              placeholder="Select"
              disabled
            >
              <el-option
                v-for="item in CompanyAddressList"
                :key="item.id"
                :label="item.addressName"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >收货人姓名</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            state.detailList.returnName
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >所在区域</el-col
          >
          <el-col :span="18" class="form-border font-small"
            >{{ state.detailList.companyAddress?.province }}
            {{ state.detailList.companyAddress?.region }}</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >详细地址</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            state.detailList.companyAddress?.detailAddress
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >联系电话</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            state.detailList.companyAddress?.phone
          }}</el-col>
        </el-row>
      </div>
      <div class="form-container-border">
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >处理人员</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            state.detailList.handleMan
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >处理时间</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            newDate(state.detailList.handleTime)
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >处理备注</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            state.detailList.handleNote
          }}</el-col>
        </el-row>
      </div>
      <div class="form-container-border">
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >收货人员</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            state.detailList.receiveMan
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >收货时间</el-col
          >
          <el-col :span="18" class="form-border font-small">{{
            newDate(state.detailList.receiveTime)
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small"
            >收货备注</el-col
          >
          <el-col :span="18" class="form-border font-small"></el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, toRefs, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { dayjs } from "element-plus";
import type {
  IReturnApplyByIdModel,
  ICompanyAddressListModel,
} from "@/types/global";
import * as order from "@/request/modules/order";

const route = useRoute();
const router = useRouter();
const state = reactive({
  detailList: {} as IReturnApplyByIdModel, // 退货申请详情
  tableData: [] as IReturnApplyByIdModel[], // 退货申请详情 转数组
  CompanyAddressList: [] as ICompanyAddressListModel[], // 获取所有收货地址
});
const { detailList, tableData, CompanyAddressList } = toRefs(state);
// 根据id 获取退货申请详情
watch(
  () => route.query.id,
  async (newVal) => {
    let res = await order.APIReturnApplyById(Number(newVal));
    detailList.value = res.data;
    tableData.value.push(detailList.value);
  },
  { immediate: true }
);
// 计算总价
const totalPrices = computed(() => {
  return (
    detailList.value.productRealPrice * detailList.value.productCount
  ).toFixed(2);
});
// 申请状态 列表
let statusOptions = reactive([
  {
    value: 0,
    label: "待处理",
  },
  {
    value: 1,
    label: "退货中",
  },
  {
    value: 2,
    label: "已完成",
  },
  {
    value: 3,
    label: "已拒绝",
  },
]);
// 返回申请状态
const statusFn = computed(() => {
  let arr = statusOptions.find(
    (item) => item.value === detailList.value.status
  );
  return arr?.label;
});
// 更新时间格式
const newDate = computed(() => {
  return (time: string | undefined) => {
    if (!time) return;
    return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
  };
});
// 获取所有收货地址 下拉框数据
order.APICompanyAddressList().then((res: { data: { id: number; addressName: string; sendStatus: number; receiveStatus: number; name: string; phone: string; province: string; city?: string | undefined; region: string; detailAddress: string; }[]; }) => {
  CompanyAddressList.value = res.data;
});
// 跳转到订单详细
const toOrderDetailFn = () => {
  router.push(`orderDetail?id=${detailList.value.orderId}`);
};
</script>

<style lang="less" scoped>
.detail-container {
  width: 1080px;
  padding: 35px 35px 15px 35px;
  margin: 20px auto;
  .detail-card {
    .detail-title {
      display: inline-block;
      font-size: 16px;
      color: #303133;
    }
  }
  .box-card1 {
    margin-bottom: 15px;
    .detail-table {
      margin-top: 15px;
    }
    .detail-total {
      display: flex;
      justify-content: flex-end;
      margin-top: 15px;
    }
  }
  .box-card2 {
    .form-container-border {
      margin-top: 15px;
      border-left: 1px solid #dcdfe6;
      border-top: 1px solid #dcdfe6;
      .form-left-bg {
        background: #f2f6fc;
      }
      .form-border {
        border-right: 1px solid #dcdfe6;
        border-bottom: 1px solid #dcdfe6;
        padding: 10px;
      }
      .font-small {
        font-size: 14px;
        color: #606266;
      }
    }
  }
}
</style>
